let $ = layui.$;
var table = layui.table;
var layer = layui.layer;
import Choose from "./choose.js";
import { setDivContainer, setOnePiece } from "./ui.js";
export default class addCinema {
  constructor() {
    this.render();
    this.handle();
  }
  render() {
    let template = `
        <form class="layui-form" action="" lay-filter="addForm" style="width: 75%;">
        <div class="layui-form-item">
          <label class="layui-form-label">院线名:</label>
          <div class="layui-input-block">
            <input  type="text" name="cinemasName"  autocomplete="off" placeholder="请输入院线名" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">地&nbsp&nbsp&nbsp址:</label>
          <div class="layui-input-block">
            <input type="text" name="cinemasAddr"  autocomplete="off" placeholder="请输入地址" class="layui-input">
         </div>
       </div>
       <div class="layui-form-item">
         <label class="layui-form-label">热&nbsp&nbsp&nbsp线:</label>
         <div class="layui-input-block">
           <input type="text" name="cinemasTel"  autocomplete="off" placeholder="请输入热线" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">官&nbsp&nbsp&nbsp网:</label>
        <div class="layui-input-block">
          <input type="text" name="cinemasUrl"  autocomplete="off" placeholder="请输入官网" class="layui-input">
       </div>
     </div>
     </form>
       <button type="button" class="layui-btn layui-btn-primary layui-border-blue"style="margin-left:40%" >新增放映厅</button>
     <form class="layui-form" action=""style="margin-top:20px;width: 75%;">
          <div class="layui-form-item">
           <label class="layui-form-label">放映厅:</label>
          <div class="layui-input-block">
           <input type="text" name="screenName" lay-verify="title" autocomplete="off"  class="layui-input">
         </div>
         </div>
         <div class="layui-form-item">
           <label class="layui-form-label">座&nbsp&nbsp&nbsp位:</label>
         <div class="layui-input-block" style="display:flex">
           <input type="text" name="sereenSeat" lay-verify="title" autocomplete="off"  class="layui-input">
           <button type="button" class="layui-btn layui-btn-sm layui-btn-normal btn" style="position:absolute ;top:5px;left:265px"> 预览</button>
         </div>
         </div>
       </form>
    <div type="text/html" id="choose"></div>
        `;
    $("#addCinemaTemplate").html(template);
    
  }
  handle() {
    let form = layui.form;
    layer.open({
      type: 1,
      title: ["添加信息", "font-size:18px;"],
      area: ["500px", "500px"],
      content: $("#addCinemaTemplate").html(),
      btn: ["新增", "关闭"],
      success: function () {
        $(".btn").each((i, b) => {
          $(b).click(function () {
           
         let txt = $(this).prev("input:text").val(); //可以获取点击的按钮的上一个text中的value
         /**
          * 0.未选座
          * 1.已选座
          */
         let content = eval(txt); //将二维数组字符串转换为二维数组
         //仅用于记录座位表中的内容（已选座，未选座）
       let white = 0;
        let red = 1;
        /* 总列数 */
        let colNumber = content[0].length;
        /* 总行数 */
        let rowNumber = content.length;
        let pieceWidth = 45; //每一个小块的宽度
        let pieceHeight = 45; //每一个小块的高度
        let choose = $("#choose")
        console.log(choose);
        setDivContainer(
            choose,
            pieceWidth,
            pieceHeight,
            colNumber,
            rowNumber
          );
          function setContent(choose, colNumber, rowNumber) {
          
            for (let row = 0; row < rowNumber; row++) {
              for (let col = 0; col < colNumber; col++) {
                let a = setOnePiece(choose,row, col,content,pieceWidth,pieceHeight,red,white);
                $(choose).append(a)
                // choose.appendChild(a);
              };
            }
            return $(choose)
          }
          setContent(choose, colNumber, rowNumber)
           new Choose()
      
           
          });
        });
      },
      yes: function (index, layero) {
        let cinemasName = $("input[name='cinemasName']").val();
        let cinemasAddr = $("input[name='cinemasAddr']").val();
        let cinemasTel = $("input[name='cinemasTel']").val();
        let cinemasUrl = $("input[name='cinemasUrl']").val();
        let screenName = $("input[name='screenName']").val();
        let sereenSeat = $("input[name='sereenSeat']").val();
        $.ajax({
          type: "post",
          data: {
            cinemasName,
            cinemasAddr,
            cinemasTel,
            cinemasUrl,
            screenName,
            sereenSeat,
          },
          url: "/api/cinema/addCinema",
          success: function (res) {
            if (res.code === 200) {
              layer.closeAll();
              // table.reload("myTable",{});
              form.render();
              layer.msg("添加成功!");
            } else {
              layer.msg("添加失败!");
            }
          },
        });
      },
    });
  }
}
